<template>

    <div  style="height: 100%">
      <div style="width: 100%;height: 50px;padding: 0px;background-color: #B3C0D1">
        <div style="float: left; margin-left: 2%;margin-top: 0%;height: 100%"><h2 style="margin-top: 3%;">行为分析与管理系统</h2></div>
        <el-dropdown @command="handleCommand" style="margin-top: 0px;padding:0;height: 30px ;margin-left: 80%">
          <div style="height: 100%;margin: 10px">
          <h3 style="margin-left: 5px;height: 30px">
            欢迎：{{agent.agentName}}
          </h3>
          </div>
          <el-dropdown-menu slot="dropdown" style="margin-top: 0px">
            <el-dropdown-item command="3">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
  <div style="height: 100%">
    <v-main v-if="type === 0"></v-main>
    <v-group-main v-else-if="type === 1"></v-group-main>
    <v-agent-main v-else-if="type === 2"></v-agent-main>
  </div>
  </div>
</template>

<script>
  import main from "../home/Main";
  import AgentMain from "./AgentMain";
  import GroupMain from "./GroupMain";

  export default {
    mounted:function () {
      this.create();
    },
    name: 'AppIndex',
    data () {
      return {
        src: require('../../assets/headerlogo.png'),
        agent:JSON.parse(localStorage.getItem("agent")),
        type:''
      }
    },
    components: {
      "v-main": main,
      "v-agent-main" :AgentMain,
      "v-group-main":GroupMain
    },
    methods:{
      create(){
        this.$axios.get('/api/agent/authorization').then(successResponse =>{
          this.type=successResponse.data.agentType
        }).catch(failResponse =>{this.$router.replace('/login')})
      },
      logout(){
        this.$axios.get('/api/agent/logout').then(successResponse=>{
          localStorage.removeItem('Authorization')
          this.$router.replace('/login')}).catch(failResponse=>{})
      },
      handleCommand(command){
          if (command==='3'){
            this.logout()
          }
      }
    }
  }
</script>

<style>

</style>

